require(['./config'], () => {
    require(['template', 'header','fly','zoom'], (template) => {
      class Content {
        constructor () {
          this.init().then(() => {
            this.addToCart()
            this.zoom()
          })
        }
        init () {
          // init方法只负责请求数据渲染页面
          // 其他的事情就不管了，交给then去调用
          // 从地址栏获取id
          const id = Number(window.location.search.slice(4))
          // 要把异步代码改造成同步的形式，用到Promise
          // 套路： return new Promise()
          return new Promise((resolve, reject) => {
            // 根据id请求后端接口拿到当前商品的详情数据
            $.get('http://rap2api.taobao.org/app/mock/245004/content', { id }, resp => {
              console.log(resp)
              if (resp.code === 200) {
                const { content } = resp.body
                // 由于rap2接口没有返回id，所以需要手动设置一下，将来换成真实接口的时候就不需要了
                // 把detail展开，把id写进去，最后构成一个新的对象赋值给this.detail
                this.content = { ...content, id }
                // 渲染详情页
                // 把detail展开，所有属性全部传递进去
                $('#design').html(template('detailTemplate', { ...this.content }))
                // 代表异步成功，承诺兑现
                resolve()
              }
            })
          })          
        }
        addToCart () {
            // 加入购物车
            $('#btn-gwc').on('click', (e) => {   
                this.fly(e)
                //先把购物车数据取出来
                let cart = window.localStorage.getItem('cart')
                if(cart){
                    //购物车已经有数据
                    cart=JSON.parse(cart)
                    const isExist = cart.some(shop =>{
                        return shop.id === this.content.id
                    })
                    console.log(isExist);
                    if(isExist){
                        cart = cart.map(shop =>{
                            if(shop.id === this.content.id){
                                shop.count++
                            }
                            return shop
                        })
                    }else{
                        cart.push({...this.content,count:1})
                    }                    
                    // cart.push(this.content)
                    // //把push之后的数组重新存localStorage
                    window.localStorage.setItem('cart',JSON.stringify(cart))
                }else{
                    //购物车为空
                    //就把当前商品放到一个数组，存进去
                    window.localStorage.setItem('cart',JSON.stringify([{...this.content,count:1}]))
                    //上面这句话等同于下面这段
                    // const arr=[
                    //     {... this.content,count:1}
                    // ]
                    // window.localStorage.setItem('cart',JSON.stringify(arr))
                }
              
            })
          }
          fly(e){
            $(`<img style="width: 40px; height: 40px; border-radius: 50%;" src="${this.content.imgs[0]}">`).fly({
                start:{
                  left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                  top: e.clientY,  //开始位置（必填）
                },
                end:{
                  left: $('#cart').offset().left, //结束位置（必填）
                  top: $('#cart').offset().top,  //结束位置（必填）
                  // width: 100, //结束时高度
                  // height: 100, //结束时高度
                },
                // autoPlay: false, //是否直接运动,默认true
                speed: 1.1, //越大越快，默认1.2
                vertex_Rtop: 100, //运动轨迹最高点top值，默认20
                onEnd: function(){
                  console.log('end')
                  // 移出DOM
                  this.destroy()
                } //结束回调
              })
          }
          zoom(){
            $('.zoom-image').elevateZoom({
                // 指定小图容器盒子的id，不加#
                gallery: 'gal1'
              })
          }
      }
      new Content()
    })
  })